<template>
	<view class="content">
		<image src="../../static/common/encourage-bg.png" class="share-bg"></image>
		
		<view class="message-title" :class="{'bgc':bgc}"> 
			<view class="posit">
				<!-- #ifdef H5 || APP-PLUS -->
				<image src="../../static/common/captial-back.png" class="goback" @tap="goback"></image>
				<!-- #endif -->
				<!-- <view class="posit-title"></view> -->
				<image src="../../static/common/encourage-icon.png" class="share-rule" @tap="goQuestionDetail(26)"></image>
			</view>
		</view>
		
		<view class="list-scroll-content">
			<view class="encourage-title">累计鼓励金（元）</view>
			<view class="encourage-total">{{myEncourage.total}}</view>
			<view class="latey"><text class="latey-text">最新获得（元）</text>{{myEncourage.newgulijin}}</view>
			
			
			<view class="my-share-detail">
				<view class="encourage-block-title">
					<image src="../../static/common/encourage-left.png" class="encourage-img" @tap="Encourage('showshare')"></image>
					<image src="../../static/common/encourage-right.png" class="encourage-img" @tap="Encourage('showimpro')"></image>
				</view>
				<view class="encourage-item">
					<view class="item-block">
						<image src="../../static/common/item-01.png" class="item-01"></image>
						<view class="item-text">待发放(元)</view>
						<view class="item-num">{{myEncourage.weijiesuan}}</view>
					</view>
					<view class="item-block">
						<image src="../../static/common/item-02.png" class="item-02"></image>
						<view class="item-text">已发放(元)</view>
						<view class="item-num">{{myEncourage.jiesuan}}</view>
					</view>
					<!-- <view class="item-block">
						<image src="../../static/common/item-02.png" class="item-03"></image>
						<view class="item-text">好友贡献鼓励金(元)</view>
						<view class="item-num">1080.50</view>
					</view> -->
					<view class="item-block" @tap="fansList">
						<image src="../../static/common/item-04.png" class="item-04"></image>
						<view class="item-text">成功邀请好友</view>
						<view class="item-num">{{myEncourage.fansnum}}</view>
					</view>
				</view>
				
				<view class="rank" @tap="gosharepand">
					<view class="rank-left">
						<view class="left-top">
							<text class="click-text">点击查看</text>鼓励金榜单
						</view>
						<image src="../../static/common/click-btn.png" class="click-btn"></image>
					</view>
					<image src="../../static/common/rank-img.png" class="rank-img"></image>
				</view>
			</view>
		</view>
		<!-- 如何获取鼓励金 -->
		<uni-popup ref="showshare" :type="type" style="z-index: 2000!important;">
			<view class="uni-share">
				<view class="tip-block">
					<view class="title">如何获取鼓励金</view>
					<view class="msg">
						<view>1.复制手机淘宝商品标题,通过熊猫优品搜索并购买</view>
						<view>2.首页直接领券购买</view>
						<view>3.邀请好友注册熊猫优品</view>
						<view>4.好友通过熊猫优品购买商品</view>
						<view>5.参与熊猫优品的优选获得</view>
					</view>
					<view class="commit-btn" @tap="cancel('share')">朕知道了</view>
				</view>
			</view>
		</uni-popup>
		<!-- 鼓励金提升攻略 -->
		<uni-popup ref="showimpro" :type="type" style="z-index: 2000!important;">
			<view class="uni-share">
				<view class="tip-block">
					<view class="title">鼓励金提升攻略</view>
					<view class="msg">
						<view>1.邀请好友注册使用熊猫优品,好友的每一笔订单均可获得鼓励金</view>
						<view>2.多消费实物类商品,如服装、箱包、化妆品等</view>
						<view>3.炫一下熊猫优品精美海报</view>
						<view>4.转一下熊猫优品趣味链接</view>
						<view>5.每天都来签到</view>
					</view>
					<view class="commit-btn" @tap="cancel('impro')">朕知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup  from'../../components/uni-popup/uni-popup.vue'
	export default{
		components:{
			uniPopup
		},
		data () {
			return {
				bgc:false, //页面滚动顶部状态栏改变颜色
				apptoken:"",
				myEncourage:"",
				type:"center"
			}
		},
		onLoad(){
			this.bottomData = this.$Data.bottomData;
			this.apptoken = uni.getStorageSync("apptoken");
			this.getEncourage();
		},
		methods: {
			gosharepand(){
				uni.navigateTo({
					url:'../user/share-panda'
				})
			},
			getEncourage(){
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.mygulijin,
					data:{apptoken:this.apptoken},
					success(res) {
						console.log(res)
						if(res.data.success){
							_this.myEncourage = res.data.data;
						}
					}
				})
			},
			goback(){
				this.$CommonJS.navigateBack();
			},
			//问题详情
			goQuestionDetail(id){
				uni.navigateTo({
					url:'../newDriver/questionDetail?id='+ id,
					animationType:'slide-in-right'
				})
			},
			Encourage(type){
				this.$refs[type].open();
			},
			cancel(type) {
				this.$refs['show' + type].close();
			},
			fansList(){
				uni.navigateTo({
					url:'../myFans/my-fans'
				})
			}
		}
		
	}
</script>

<style>
	@import url("my-encourage-money.css");
</style>
